<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .panel {
            width: 620px;
            height: 220px;
            background-color: #414141;
            /* margin: 50px auto; */
            border-radius: 10px;
        }
        /* 每个盒子的元素 */
        
        .item1 {
            width: 200px;
            height: 200px;
            padding: 10px 30px;
            /* background-color: skyblue; */
            float: left;
            box-sizing: border-box;
        }
        
        .chip {
            width: 30px;
            height: 30px;
            position: relative;
            top: 30px;
            left: 50px;
            /* 滤镜 */
            filter: drop-shadow(0 3px 5px rgba(4, 227, 138, 0.8))
        }
        
        .chip img {
            width: 30px;
            height: 30px;
        }
        
        .circle1 {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid rgba(4, 227, 138, 0.5);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .circle2 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid rgba(4, 227, 138, 0.5);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .count_sum {
            padding-top: 45px;
            margin-left: 0px;
            color: white;
            text-align: center;
        }
        
        .count {
            font-size: 30px;
            color: #04E38A;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div class="panel">
        <div class="item1">
            <div class="chip">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <img src="../images/chip.svg" alt="">
            </div>
            <div class="count_sum">
                <p class="count">273</p>
                <p class="count-text">主变台数</p>
                <p>(台)</p>
            </div>

        </div>
        <div class="item1">
            <div class="chip">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <img src="../images/chip.svg" alt="">
            </div>
            <!-- <span class="count">273</span>
            <span class="count-text">主变台数</span>
            <span>(台)</span> -->
        </div>
        <div class="item1">
            <div class="chip">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <img src="../images/chip.svg" alt="">
            </div>
            <!-- <span class="count">273</span>
            <span class="count-text">主变台数</span>
            <span>(台)</span> -->
        </div>
    </div>
</body>

</html>